<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web服务的客户端</title>
</head>
<body>
    <h1>实例：Web服务的客户端</h1>

    <script>
        // 创建服务
        function createWebService(baseUrl) {
            return new Proxy({}, {
                get(target, propKey, receiver) {
                    return async function(params = {}) {
                        const queryString = Object.entries(params)
                            .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
                            .join('&');
                        
                        const url = `${baseUrl}/${propKey}${queryString ? '?' + queryString : ''}`;
                        
                        try {
                            const response = await fetch(url);
                            return await response.json();
                        } catch (error) {
                            console.error('请求失败:', error);
                            throw error;
                        }
                    }
                }
            });
        }

        // 使用示例
        const service = createWebService('https://api.example.com');

        // service.users({id: 123}).then(data => {
        //     console.log(data);
        // });

        // service.search({keyword: '测试'}).then(data => {
        //     console.log(data);
        // });
    </script>
</body>
</html> 